import React, { useEffect, useState } from 'react'
import { useCanvas } from '@/components'
import './useCanvasDom.scss'
import { message } from 'antd'
const useCanvasDom: React.FC = () => {
  const [daetTypes, setDaetType] = useState('rect')
  let [useCanvasDom, setUseCanvasDom] = useState<useCanvas>(null)
  const [cursor,setcursor] = useState('crosshair')
  const dartTypeArr = [
    { name: '矩形', type: 'rect' },
    { name: '圆形', type: 'round' },
    { name: '线', type: 'line' },
    { name: '手写', type: 'write' },
    { name: '文字', type: 'text' },
    { name: '清空', type: 'empty' },
    { name: '移动', type: 'move' },
    { name: '撤回', type: 'withdraw' },
  ]
  useEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    setUseCanvasDom(new useCanvas('canvas'))

  }, [])
  function inputModel(e) {
    const name = e.target.name
    useCanvasDom[name] = e.target.value
  }
  function setDartType(type) {
    if(type==='text') {
      setcursor('pointer')
    }else {
      
      setcursor('crosshair')
    }
    if(type==='move') {
      message.warning('只能移动矩形,圆形')
      setcursor('move')
    }
    if(type==='withdraw') {
      useCanvasDom.setWithdraw()
      return
    }
    if(type==='write') {
      message.warning('手写不做保存处理，如需要请最后使用')
      setcursor('pointer')
      // @ts-ignore
      // setcursor('url(../../../assets/image/pen.jpg)')
    }
    if(type==='empty') {
      useCanvasDom.emptyArrrrDart()
      return
    }
    useCanvasDom.setDartType(type)
    setDaetType(type)
  }
  return (
    <div style={{ width: '100%', height: '90%' }}>
      <div className='actionBar'>
        {dartTypeArr.map(val => {
          return (
            <div className={daetTypes === val.type ? 'select' : ''} key={val.type} onClick={() => { setDartType(val.type) }}>{val.name}</div>
          )
        })}

        <div>
          <input type="color" name='color' onBlur={inputModel} />
        </div>
        <div>
          <input type="range" name='lineWidth' max={10} defaultValue='1' onBlur={inputModel} />
        </div>
      </div>
      <canvas style={{cursor}} id='canvas' ></canvas>
    </div>
  )
}
export default useCanvasDom